<script setup>
    // 导入函数
    import { reactive, ref, toRef, toRefs } from 'vue'

    /**
     * reactive用法
     */
    // 普通对象不具有响应式
    // const user = {
    //     name:'tom',
    //     age:18
    // }
    // 创建响应式对象，是一个代理对象
    const user = reactive({
        name:'tom',
        age:18
    })

    const change = () => {
        // console.log(this) // 无法访问this，也不需要访问
        user.name = 'alice'
        console.log(user)
    }

    /**
     * ref用法
     */
    // 创建响应式对象
    const count = ref(1) // 返回{value:1}
    // console.log(count.value)

    const modify = () => {
        count.value++
        console.log(count.value)
    }

    /**
     * toRef用法
     */
    // const age = user.age
    const ageRef = toRef(user, 'age')

    /**
     * toRefs用法
     */
    const u = toRefs(user)
    var {name,age} = u 

</script>

<template>  
    <p>{{ user.name }}</p>
    <button @click="change">修改user.name</button>
    <hr>
    
    <p>{{ count }}</p>
    <button @click="modify">修改count</button>
    <hr>

    <p>{{ ageRef }}</p>
    <p>{{ user.age }}</p>
    <button @click="ageRef++">修改ageRef</button>
    <hr>

    <p>{{ name }}</p>
    <p>{{ user.name }}</p>
    <button @click="name='zhangsan'">修改name</button>
</template>

<style scoped>

</style>